<template>
	<view>
		<!--me-tabs导航组件-->
		<me-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange" :height="80"></me-tabs>
		<mescroll-uni top="95" ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @up="upCallback"  @down="downCallback">
			<view class="account-box" >
				<view class="account-item" v-for="(item,index) in listdata" :key="index">
					<view class="account-info" >
						<image :src="item.platform==1?'/static/image/douyi_logo.png':'/static/image/kwai_logo.png'" mode="aspectFill"></image>
						<view class="douyinaccout">{{item.video_account}}</view>
						<view  class="textinfo">({{item.limit>0?'限制'+item.limit+'次参与':'不限参与次数'}})</view>
					</view>
					
					<view class="rightbutton">
						
						<view class="choice" @click="comfirmbutton(index)">选择</view>
						<view class="edit" @click="edit(item.id)">编辑</view>
						
					</view>
				</view>
			</view>
		</mescroll-uni>
		<!--提示参与二选一-->
	<!-- 	<alert modeltitle="提示" :visible="modelshow" :isclosebutton="false">
			<view class="continuetip">
				<text>检测您当前参与条件设置了抽奖口令，短视频粉丝抽奖与抽奖口令功能只能二选一，是否关闭抽奖口令使用短视频粉丝参与？</text>
				<view class="editbutton">
					<view class="again" @click="modelshow=false">取消</view>
					<view class="continue" @click="saveinfo">确认</view>
				</view>
			</view>
		</alert> -->
	</view>
</template>

<script>
	/**
	 * 账号管理 (抖音，快手，公众号)
	 */
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	const Tiktok = uni.requireNativePlugin("Html5app-Tiktok");
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				// modelshow: false,
				tabIndex: 0, // 当前菜单下标
				tabs: ['抖音号', '快手号'],
				listdata: [],
				downOption: {
					use: true,
					textLoading: "玩命加载中...",
					textNoMore: "-- 人家是有底线的 --",
					autoShowLoading: true,
				},
				upOption: {
					auto: false,
					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '~ 查找无结果 ~', // 提示
						btnText: ''
					},
					textLoading: "玩命加载中...",
					textNoMore: "-- 人家是有底线的 --",
				}
			}
		},
		//监听右上角事件
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url:'/pages/setinfo/shortvideo?platformIndex='+this.tabIndex
			})
		},
		computed:{
			shortvideo(){
				return this.$common.state.shortvideo
			}
		},
		watch:{
			shortvideo(value){
				let flag = false
				this.listdata.map((item,index)=>{
					if(item.id==value.id){
						console.log(index)
						//已找到要更新的记录
						flag = true
						this.$set(this.listdata,index,value) 
					}
				})
				if(!flag){
					this.listdata.push(value)
				}
			}
		},
		methods:{
			edit(id){
				uni.navigateTo({
					url:'/pages/setinfo/shortvideo?platformIndex='+this.tabIndex+'&id='+id
				})
			},
			comfirmbutton(index) {
				this.saveinfo(this.listdata[index])
			},
			
			saveinfo(shortvideo_data) {
				let lottey = uni.getStorageSync('lettytables');
				//清楚抽奖口令
				//lottey.luckconfig.senior.joinconfig.limited_password=''
				lottey.luckconfig.senior.joinconfig.short_video_userid = shortvideo_data.video_userid
				lottey.luckconfig.senior.joinconfig.short_video_account = shortvideo_data.video_account
				lottey.luckconfig.senior.joinconfig.short_video_platform = this.tabIndex + 1
				lottey.luckconfig.senior.joinconfig.short_video_id = shortvideo_data.id
			
				try {
					uni.setStorageSync('lettytables', lottey);
					uni.navigateBack({
						delta: 1
					})
				} catch (e) {
					this.$ShowMsg(e);
				}
			},
			
			tabChange(index){
				this.tabIndex = index
				this.listdata = [];
				this.mescroll.resetUpScroll();
			},
			downCallback(){
				this.mescroll.resetUpScroll()
			},
			upCallback(page){
				this.getinitdata(page.num).then(res => {
					//console.log(res);
					this.mescroll.endSuccess(res.length)
					//设置列表数据
					if (page.num == 1) this.listdata = [] //如果是第一页需手动制空列表
					this.listdata = this.listdata.concat(res) //追加新数据
				}).catch(error => {
					this.mescroll.endErr() 
					this.$ShowMsg(error,'error')
				})
			},
			getinitdata(page) {
				return new Promise((resolve, reject) => {
					this.$HttRequest({
						url: '/shortApp/lists',
						param: {
							page:page,
							platform:this.tabIndex+1,
						}
					}).then((res) => {
						console.log(res)
						if (res.status === 10000) {
							resolve(res.data.data);
						} else {
							this.$ShowMsg(res.message,'error')
						}
					}).catch((error) => {
						//异常错误
						reject(error.errMsg);
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f0f0f0;
	}
	.continuetip {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		font-size: 28rpx;
	
		.editbutton {
			margin: 20rpx auto;
			margin-top: 40rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
	
			.again {
				width: 220rpx;
				background-color: #e6e6e6;
				color: #000;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 85rpx;
				border-radius: 40rpx;
			}
	
			.continue {
				width: 220rpx;
				background-color: $uni-color-primary;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 85rpx;
				border-radius: 40rpx;
			}
		}
	}
	
	.account-box{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 90%;
		margin: 0 auto;
		flex-direction: column;
		.account-item{
			border-radius: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			width: 100%;
			overflow: hidden;
			font-size: 25rpx;
			margin: 10rpx auto;
			padding:20rpx 0;
			position: relative;
			border: 1rpx solid #fff;
			.account-info{
				margin-left: 20rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				image{
					margin-right: 20rpx;
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
			}
			.textinfo{
				margin-left: 5rpx;
				color: #9b9b9b;
			}
			.rightbutton{
				font-size: 28rpx;
				color: $uni-color-primary;
				display: flex;
				justify-content: center;
				align-items: center;
				.choice{
				margin-right: 20rpx;
				}
				.edit{
					margin-right: 20rpx;
				}
			}
			
		}
		.account-item:after{
			content: '';
			background-color:rgba(#fff,0.8);
			position: absolute;
			z-index: -1;
			filter: blur(20rpx); 
			width: 100%;
			height: 100%;
		}
	}
</style>
